<template>
  <div class="news">
    <van-loading type="spinner" color="#1989fa" size="24px" v-show="flag" />
    <van-pull-refresh
    v-model="isLoading"
    success-text="刷新成功"
    @refresh="onRefresh"
    >
    <van-card  :title="item.title" :thumb="item.img_url" v-for="item in newsList" :key="item.id" @click="clickLink(`/news/detail/${item.id}`)">
        <template #price>
            <span class="time">发表时间: {{item.add_time|formatData}}</span>
        </template>
        <template #num>
            <span>点击:{{item.click}}</span>
        </template>
    </van-card>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      newsList: [], //新闻列表
      isLoading: false
    };
  },

  created() {
      this.getNewsList()
  },

  methods: {
    //   获取新闻列表
    async getNewsList() {
      const { data: res } = await this.$axios.get("/api/getnewslist");
      if (res.status != 0) return this.$notify("获取失败");
      this.flag = false;
      this.newsList = res.message;
    },
    // 下拉刷新
    onRefresh(){
        this.getNewsList()
        this.isLoading=false
    },
    // 点击跳转路由
    clickLink(path){
     this.$router.push(path)
    }
  }
};
</script>

<style scoped lang='less'>
.time{
    color: #226aff
}
/deep/.van-card__content{
    min-height: 45px;
}
</style>
